import React from "react"
import { Card } from 'antd';
export default class FormDemo extends React.Component {

    constructor() {
        super();
        this.state = {
            value: ""
        }
        this.username = React.createRef();
        this.password = React.createRef();
    }

    handleSubmit = (e) => {
        e.preventDefault();
        alert(this.state.value);
    }

    onChangeHandler = (e) => {
        this.setState({
            value: e.target.value
        })
    }

    clickHandler = (e) => {
        alert(this.username.current.value + "---" + this.password.current.value);
    }

    render() {
        return (
            <div>
                <Card title="双向数据绑定" bordered={false}>
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" value={this.state.value} onChange={this.onChangeHandler} />
                        <input type="submit" value="提交"></input>
                    </form>
                </Card>
                <Card className="margin_top_sm" title="双向数据绑定" bordered={false}>
                    <div>
                        <input type="text" ref={this.username} />
                        <input type="text" ref={this.password} />
                        <button onClick={this.clickHandler}>提交</button>
                    </div>
                </Card>
            </div>
        )
    }
}